import {createSlice} from '@reduxjs/toolkit';

// 创建一个 Redux 切片（slice），用于管理菜单的状态
const MenuSlice = createSlice({
  name: 'MenuSlice', // 定义切片的命名空间
  initialState: () => ({
    isCollapse: false, // 菜单是否折叠，默认为不折叠
    DefaultSelectedKeys: '/home', // 默认选中的菜单项
    // 面包屑导航数据
    tagList: (() => {
      // 从 sessionStorage 中获取已保存的 tagList 数据
      const storedTagList = sessionStorage.getItem('tagList');
      // 如果存在，则解析 JSON 数据；否则使用默认值
      return storedTagList ? JSON.parse(storedTagList) : [{ path: '/', name: 'Home', label: '首页' }];
    })(),
    // 当前选中的面包屑数据
    tagActice: (() => {
      // 从 sessionStorage 中获取已保存的 tagActice 数据
      const storedTagActive = sessionStorage.getItem('tagActice');
      // 如果存在，则解析 JSON 数据；否则使用默认值
      return storedTagActive ? JSON.parse(storedTagActive) : {};
    })()
  }),
  reducers: { // 定义用于修改状态的方法（reducers）
    // 修改导航菜单的折叠状态
    CollapseMenu: (state) => {
      state.isCollapse = !state.isCollapse; // 切换折叠状态
    },
    // 设置默认选中的菜单项
    setDefaultSelectedKeys: (state, action) => {
      state.DefaultSelectedKeys = action.payload; // 更新默认选中的菜单项
    },
    // 添加面包屑导航数据
    setTagList: (state, action) => {
      const val = action.payload; // 获取传递的数据
      if (val.name !== 'Home') {
        state.tagActice = val; // 设置当前选中的面包屑数据
        if (!state.tagList.some(item => item.name === val.name)) {
          state.tagList.push(val); // 如果不存在相同名称的面包屑，则添加到列表中
        }
      } else {
        state.tagActice = { path: '/', name: 'Home', label: '首页' }; // 设置首页作为当前选中的面包屑数据
      }
      sessionStorage.setItem('tagList', JSON.stringify(state.tagList)); // 保存 tagList 到 sessionStorage
      sessionStorage.setItem('tagActice', JSON.stringify(state.tagActice)); // 保存 tagActice 到 sessionStorage
    },
    // 关闭面包屑导航数据
    closeTagList: (state, action) => {
      const index = state.tagList.findIndex(item => item.name === action.payload.name); // 查找面包屑的索引
      if (index > -1) {
        state.tagList.splice(index, 1); // 移除面包屑数据
      }
      sessionStorage.setItem('tagList', JSON.stringify(state.tagList)); // 保存更新后的 tagList 到 sessionStorage
    },
    // 设置当前选中的面包屑数据
    setTagActive: (state, action) => {
      const val = action.payload; // 获取传递的数据
      if (val.name === 'Home') {
        state.tagActice = { path: '/', name: 'Home', label: '首页' }; // 设置首页作为当前选中的面包屑数据
      } else {
        state.tagActice = val; // 设置其他页面作为当前选中的面包屑数据
      }
      sessionStorage.setItem('tagActice', JSON.stringify(state.tagActice)); // 保存 tagActice 到 sessionStorage
    },
    // 退出登录将所有数据清空 
    setLogOutClear: (state) => {
      state.tagList = [{ path: '/', name: 'Home', label: '首页' }]; // 重置 tagList
      state.tagActice = { path: '/', name: 'Home', label: '首页' }; // 重置 tagActice
      state.isCollapse = false
      state.DefaultSelectedKeys = '/home', // 默认选中的菜单项
      sessionStorage.setItem('tagList', JSON.stringify(state.tagList)); // 保存更新后的 tagList 到 sessionStorage
      sessionStorage.setItem('tagActice', JSON.stringify(state.tagActice)); // 保存 tagActice 到 sessionStorage
      sessionStorage.setItem('DefaultSelectedKeys', '/home'); // 保存 tagActice 到 sessionStorage
    }
  }
});

// 导出 actions 对象，包含所有的 reducer 方法
export const {
  CollapseMenu, // 修改导航收起与展开状态
  setDefaultSelectedKeys, // 设置默认选中的菜单项
  setTagList, // 处理面包屑导航数据(添加)
  closeTagList, // 处理面包屑导航数据(关闭)
  setTagActive, // 设置当前选中的Tag
  setLogOutClear // 退出登录将所有数据清空 
} = MenuSlice.actions;

// 导出 reducer 函数，供其他模块使用
export default MenuSlice.reducer;